<script >
export default {
    data() {
        return {
            books: [
                { id: 1, name: '红楼梦' },
                { id: 2, name: '三国演义' },
                { id: 3, name: '水浒传' },
                { id: 4, name: '西游记' }
            ],
            students: [
                { id: 1, name: 'Jack' },
                { id: 2, name: 'Annie' },
                { id: 3, name: 'Tom' },
            ]
        }
    }, methods: {
        changeBookListStyle() {
            this.$refs.bookList[2].style = 'color : red'
        },
        studentsRef(el) {
            // console.log(el);
        }

    }
}
</script>

<template>
    <ul>
        <li v-for="b in books" :key="b.id" ref="bookList">
            {{ b.name }}
        </li>
    </ul>
    <input type="button" value="点击我" v-on:click="changeBookListStyle">
    <hr>
    <ul>
        <li v-for="s in students" :key="s.id" :ref="studentsRef">
            {{ s.name }}
        </li>
    </ul>
</template>

<style scoped></style>
